<template>
	<view class="container">
		
		<view class="header">
			<image src="/static/icon_my_person.png" class="pic1"></image>
			<input type="text" placeholder="输入股票或代码" @input="doSearchKey"/>
			<view class="askBtn" @click="doSearch">查询</view>
		</view>
		<!-- 搜索的东西 -->
		<view class="search-choose" v-if="needShow">
			<view v-for="(item,index) in dataSearch" :key="index" class="search-choose-options" @click="applyMethods(item.id)">
				{{item.code}} {{item.name}}
			</view>
		</view>
		<!-- 标题区域 -->
		<view class="tit-areas">
			<view class="">股票代码</view>
			<view class="">代码名称</view>
			<view class="">最新价</view>
			<view class="">涨跌幅</view>
			<view class="">操作</view>
		</view>
		<!-- 身体区域 -->
		<view v-for="(item,index) in li" :key="index" class="bodyss" @click="clickHandle(item)">
			<view class="first-line">
				<view class="needWhite">
					{{item.code}}
				</view>
				<view class="needGray">
					{{item.name}}
				</view>
				<view class="needBlue">--</view>
				<view class="needBlue">--</view>
        <view v-if="item.id!==clickFooter">
          <view class="arrow"></view>
        </view>
				<view v-if="item.id==clickFooter">
          <view class="arrow-B"></view>
        </view>
			</view>
			<view class="second-line" v-if="item.id==clickFooter">
				<view class="optionsA  need-gray-line" @click="applyMethods(item.id)">
					<image src="/static/icon_object_edit.png" mode="widthFix"></image><text>申请方案</text>
				</view>
				<view class="optionsA" @click="addMyChoose(item)">
					<image src="/static/icon_object_add.png" mode="widthFix"><text>加入自选</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      needShow: false,
      li: [],
      clickFooter: 0,
      keys: "",
      // 搜说得到的内容
      dataSearch: [
        "这是一条数据",
        "这是一条数据",
        "这是一条数据",
        "这是一条数据",
        "这是一条数据",
        "这是一条数据",
      ],
    };
  },
  onShow() {
    var that = this;
    var value = uni.getStorageSync("poxer_ssid");
    var param = { uid: value };
    //////
    that._post("Works/index", param, function (res) {
      if (res.status != "1") {
        return;
      }
      that.li = res.data;
    });
  },
  methods: {
    /**
     * 搜索
     */
    doSearchKey(e) {
      this.needShow = 0;
      this.keys = e.detail.value;
    },
    doSearch() {
      var that = this;
      var param = { keys: that.keys };
      //////
      that._post("Works/search", param, function (res) {
        if (res.status != "1") {
          return;
        }
        if (res.data.length < 1) {
          return;
        }
        that.dataSearch = res.data;
        that.needShow = 1;
      });
    },
    // 点击事件，呼出对应的菜单
    clickHandle(item) {
      var that = this;
      ////
      var click = that.clickFooter;
      that.clickFooter = click == item.id ? 0 : item.id;
      that.needShow = 0;
    },
    //添加到我的自选
    addMyChoose(item) {
      var value = uni.getStorageSync("poxer_ssid");
      if (value == null || value == "") {
        return uni.showModal({
          title: "提示",
          content: "您还未登录",
          showCancel: false,
          success: function (res) {
            return uni.navigateTo({
              url: "/pages/login/login",
            });
          },
        });
      }
      ///////////////////////////////////////////
      var that = this;
      var param = { uid: value, name: item.name, code: item.code };
      //////
      that._post("Works/joinMy", param, function (res) {
        if (res.status != "1") {
          return;
        }
        return uni.showModal({
          title: "提示",
          content: res.msg,
          showCancel: false,
          success: function (res) {
            return uni.switchTab({
              url: "/pages/chooseBySelf/chooseBySelf",
            });
          },
        });
      });
    },
    //制定方案
    applyMethods(id) {
      var value = uni.getStorageSync("poxer_ssid");
      if (value == null || value == "") {
        return uni.showModal({
          title: "提示",
          content: "您还未登录",
          showCancel: false,
          success: function (res) {
            return uni.navigateTo({
              url: "/pages/login/login",
            });
          },
        });
      }
      return uni.navigateTo({
        url: "/pages/ApplicationScheme/ApplicationScheme?id=" + id,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #000000;
  width: 750rpx;
  height: 100vh;
  position: relative;
}

.search-choose {
  width: 480rpx;
  height: 400rpx;
  position: absolute;
  border: 1px solid white;
  left: 108rpx;
  background-color: white;
  box-sizing: border-box;

  .search-choose-options {
    display: flex;
    align-items: center;
    height: 54rpx;
    box-sizing: border-box;
    padding-left: 20rpx;
    border: 1px solid #e9e9e9;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
  }
}

.header {
  width: 750rpx;
  height: 90rpx;
  background: #0e0e0e;
  box-sizing: border-box;
  padding-left: 30rpx;
  padding-right: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .pic1 {
    width: 40rpx;
    height: 40rpx;
    background: #ffffff;
    border-radius: 40rpx;
  }

  input {
    width: 480rpx;
    height: 68rpx;
    background: #ffffff;
    border-radius: 10rpx;
    box-sizing: border-box;
    padding-left: 30rpx;
    padding-right: 30rpx;
  }

  .askBtn {
    width: 100rpx;
    height: 68rpx;
    background: #db1414;
    border-radius: 10rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
  }
}

.tit-areas {
  width: 750rpx;
  height: 70rpx;
  background: #242426;
  padding-left: 30rpx;
  padding-right: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #aaaaaa;
}

.tit-areas view {
  flex: 1;
  text-align: center;
}

//
.bodyss {
  width: 100vw;
  padding-left: 25rpx;
  padding-right: 25rpx;

  // border: 1px solid red;

  .first-line {
    height: 92rpx;
    // border: 1px solid red;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;

    .needWhite {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
    }

    .needGray {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #aaaaaa;
    }

    .needBlue {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #1dec2b;
    }

    .arrow {
      width: 25rpx;
      height: 25rpx;
      border-left: 12rpx solid transparent;
      border-right: 12rpx solid transparent;
      border-bottom: 12rpx solid white;
      display: inline-block;
      flex: none;
    }

    .arrow-B {
      width: 25rpx;
      height: 25rpx;
      border-left: 12rpx solid transparent;
      border-right: 12rpx solid transparent;
      border-top: 12rpx solid white;
      display: inline-block;
      flex: none;
    }
  }

  .first-line view {
    flex: 1;
    text-align: center;
  }

  .second-line {
    height: 92rpx;
    // border: 1px solid blue;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #1b1b1b;

    .need-gray-line {
      border-right: 1rpx solid gray;
    }

    .optionsA {
      width: 50%;
      display: flex;
      justify-content: space-evenly;
      padding: 0 50rpx;

      image {
        width: 30rpx;
        top: 5rpx;
        height: 30rpx;
      }
    }
  }
}
</style>
